<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="__CSS__/base.css">
  <link rel="stylesheet" href="__CSS__/iconfont.css">
  <link rel="stylesheet" href="__CSS__/reg.css">

  <!--<script src="__STATIC__/xiala/js/jquery-2.1.1.min.js" type="text/javascript"></script>-->
  <link rel="stylesheet" type="text/css" href="__STATIC__/xiala/css/default.css">
  <link rel="stylesheet" type="text/css" href="__STATIC__/xiala/css/styles.css">
  <style>
    .headtil {
      color: #fff;
      font-size: 20px;
      line-height: 55px;
      position: absolute;
      z-index: 111;
      width: 100%;
    }

    .ulogo {
      background-color: #41c981;
      padding: 25px;
      border-bottom-right-radius: 25px;
      -moz-border-radius-bottomleft: 50px;
    }
  </style>
</head>
<body>
<div class="headtil">
  <span class="ulogo">talk直播平台</span>
</div>
<div class="wrap">
  <div class="wpn">
    <div class="form-data find_password">
      <h4>用户登录</h4>

      <p class="right_now">没有账号？<a href="{:url('index/reg')}">立即注册</a></p>

      <p class="p-input pos">
        <label>账号</label>
        <input type="text" name="userLoginName" id="loginName">
      </p>

      <p class="p-input pos">
        <label>密码</label>
        <input type="password" name="userPassword" id="password">
      </p>


      <div class="container">
        <div class="card-drop">
          <a class='toggle' href="#">
            <i class='fa fa-suitcase'></i>
            <span id="data_role" class='label-active' style="font-size: 14px;">请选择角色</span>
          </a>
          <ul>
            <li class='active'>
              <a data-label="主讲(老师)" href="#"><i class='fa fa-suitcase'></i>主讲(老师)</a>
            </li>
            <li>
              <a data-label="助教" href="#"><i class='fa fa-magic'></i> 助教</a>
            </li>
            <li>
              <a data-label="学员" href="#"><i class='fa fa-bolt'></i> 学员</a>
            </li>
            <li>
              <a data-label="直播用户" href="#"><i class='fa fa-bolt'></i> 直播用户</a>
            </li>
            <li>
              <a data-label="巡检员" href="#"><i class='fa fa-bolt'></i> 巡检员</a>
            </li>

          </ul>
        </div>
      </div>


      <button class="lang-btn next" style="z-index:-1;background-color: #dddddb" disabled="disabled" id="login">登录
      </button>
      <p class="right">Powered by © 2018</p>
    </div>
  </div>
</div>
<form method="post" action="http://rykj.gensee.com/training/site/login" id="form1" style="display: none">
  <input type="hidden" name="redirectUrl" value="">
  <input type="hidden" name="errorUrl" value="">
  <input type="text" id="nameInput" name="name" value="">
  <input id="passwordInput" type="password" name="password" value="">
</form>

<script src="__JS__/jquery.js"></script>
<script src="__JS__/agree.js"></script>
<script src="__JS__/layui/layui.all.js"></script>
<script type="text/javascript">
  (function($){
    var cards = $('.card-drop'), toggler = cards.find('.toggle'), links = cards.find('ul>li>a'), li = links.parent('li'), count = links.length, width = 100;
    li.each(function(i){
      $(this).css('z-index', count - i);
    });
    function setClosed(){
      li.each(function(index){
        $(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');
      });
      li.addClass('closed');
      toggler.removeClass('active');
    }

    setClosed();
    toggler.on('mousedown', function(){
      var $this = $(this);
      if($this.is('.active')){
        setClosed();
      }else{
        $this.addClass('active');
        li.removeClass('closed');
        li.each(function(index){
          $(this).css('top', 32 * (index + 1)).css('width', '100%').css('margin-left', '0px');
        });
      }
    });
    links.on('click', function(e){
      var $this = $(this), label = $this.data('label');
      icon = $this.children('i').attr('class');
      li.removeClass('active');
      if($this.parent('li').is('active')){
        $this.parent('li').removeClass('active');
      }else{
        $this.parent('li').addClass('active');
      }
      toggler.children('span').text(label);
      toggler.children('i').removeClass().addClass(icon);
      setClosed();
      e.preventDefault;
    });
  }(jQuery));

  $("#loginName").keyup(function(){
    checkInput()
  })
  $("#password").keyup(function(){
    checkInput()
  })
  function checkInput(){
    if($.trim($("#loginName").val()) != '' && $.trim($("#password").val()) != ''){
      $("#login").removeAttr("disabled");
      $("#login").css('background', '#41c981');
    }else{
      $("#login").css('background', '#dddddb');
      $("#login").attr("disabled", "disabled");
    }
  }

  function login(){
    var user = $.trim($("input[name='userLoginName']").val());
    var pass = $.trim($("input[name='userPassword']").val());
    var role = $("#data_role").text();

    if(user == ''){
      layer.open({
        title  : '提示',
        content: '请填写账号'
      });
      return
    }
    if(pass == ''){
      layer.open({
        title  : '提示',
        content: '请填写密码'
      });
      return
    }

    if(role == '请选择角色'){
      layer.open({
        title  : '提示',
        content: '请选择角色'
      });
      return
    }

    var data = {
      userLoginName: user,
      userPassword : pass,
      role         : role
    };
    $.post("{:url('index/Talk_login/login')}", data, function(rs){
      if(rs.state == 0){
        layer.open({
          title  : '错误',
          icon   : 5,
          content: rs.msg
        });
      }else{
        layer.open({
          title  : '错误',
          icon   : 5,
          content: rs.msg
        });
        return;


        if(rs.act == 't'){
          $("#nameInput").val(user);
          $("#passwordInput").val(pass);

          $("#form1").submit();
        }else if(rs.act == 's'){
          //          location.href = "{:url('index/main/index')}"
        }else{
          //admin
          //          location.href = "{:url('admin/Admin/index')}"

        }
      }
    })
  }

  $("#login").click(function(){
    login();
  })

  $("body").keydown(function(){
    if(event.keyCode == "13"){
      if($.trim($("#loginName").val()) != '' && $.trim($("#password").val()) != ''){
        login();
      }
    }
  });

</script>
</body>
</html>